<template>
    <a-modal v-model:open="params.visible" title="选择商品" destroyOnClose @ok="ok" width="700px" :zIndex="1000">
        <div class="modal-content" style="margin-top: 24px">
            <a-table row-key="id" :dataSource="params.dataSource" :columns="params.columns" :pagination="false" :row-selection="{ type:'radio', selectedRowKeys: params.selectedRowKeys, onChange: onSelectChange }">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'images'">
                        <img :src="getImageUrl(text)" style="width: 24px" alt="">
                    </template>
                    <template v-if="column.dataIndex === 'cate'">
                        {{text?.name}}
                    </template>
                </template>
            </a-table>
            <div style="text-align: right">
                <a-pagination style="margin-top: 12px" show-size-changer v-model:current="params.page" :total="params.total"
                              @showSizeChange="onShowSizeChange"/>
            </div>
        </div>
    </a-modal>
    <a-modal v-model:open="params.skuVisible" title="选择SKU" width="700px" @ok="skuOk" :zIndex="1001">
        <div class="modal-content" style="margin-top: 24px">
            <a-table row-key="id" :dataSource="params.skuData" :columns="params.skuColumns" :pagination="false" :row-selection="{ selectedRowKeys: params.skuRowKeys, onChange: onSelectSkuChange }">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'images'">
                        <img :src="getImageUrl(text)" style="width: 24px" alt="">
                    </template>
                    <template v-if="column.dataIndex === 'cate'">
                        {{text?.name}}
                    </template>
                </template>
            </a-table>
        </div>
    </a-modal>
</template>
<script setup>
import { reactive, onMounted } from 'vue'
import {goodList,goodSku} from "../../api/goods.js";
const props = defineProps(['visible','goodIds'])
const emit = defineEmits(['getGoods'])
const params = reactive({
    visible: false,
    skuVisible: false,
    page: 1,
    pageSize: 10,
    total: 0,
    selectedRowKeys:[],
    skuRowKeys: [],
    selectGoods:[],
    skuData:[],
    skuColumns:[
        {title: '标题', dataIndex: 'name', key: 'name'},
        {title: '价格', dataIndex: 'price', key: 'price'},
        {title: '库存', dataIndex: 'stock_num', key: 'stock_num'},
    ],
    columns:[
        {title: '商品图片', dataIndex: 'images', key: 'images'},
        {title: '商品标题', dataIndex: 'title', key: 'title'},
        {title: '商品编号', dataIndex: 'goods_no', key: 'goods_no'},
        {title: '商品分类', dataIndex: 'cate', key: 'cate'},
    ],
    dataSource:[]
})
onMounted(()=>{
    params.selectedRowKeys = []
    params.skuRowKeys = []
    params.selectGoods = []
    goodList({pageSize: 100000}).then((res)=>{
        params.dataSource = res.data.items
        params.total = res.data.total
    })
})
const open = () => {
    params.visible = true
}
const skuOk = () => {
    let configSku = []
    params.skuRowKeys.map(item=>{
        let flag = params.skuData.find(demo=>{return demo.id === item})
        if(flag) configSku.push(flag)
    })
    params.visible = false
    params.skuVisible = false
    params.selectedRowKeys = []
    params.skuRowKeys = []
    params.selectGoods = []
    emit('getGoods', configSku)
}
const ok = () => {
    let configGoods = []
    params.selectedRowKeys.map(item=>{
        let flag = params.selectGoods.find(demo=>{return demo.id === item})
        if(flag) configGoods.push(flag)
    })
    goodSku({goodsNo:configGoods[0].goods_no}).then((res)=>{
        console.log(res)
        params.skuData = res.data.items
    })
    params.skuVisible = true
    // emit('getGoods', configGoods)
}
const onSelectChange = (selectedRowKeys) => {
    selectedRowKeys.map(item=>{
        const goodsItem = params.dataSource.find(demo=>{return demo.id === item})
        const isHave = params.selectGoods.find(demo=>demo.id === item)
        if(!isHave){
            params.selectGoods.push(goodsItem)
        }
    })
    params.selectedRowKeys = selectedRowKeys;
};
const getImageUrl = (text) => {
    if(text) return text[0] || ''
}
const onSelectSkuChange = (selectedRowKeys) => {
    params.skuRowKeys = selectedRowKeys;
}
const onShowSizeChange = (current, pageSize) => {
    params.page = current
    params.pageSize = pageSize;
    getList()
}
defineExpose({
    open
})
</script>
